<template>
  <div class="carousel">
    <el-carousel type="card" style="height: 310px;">

      <el-carousel-item   v-for="(image, index) in images" :key="index" style="height: 310px;">
        <img :src="image.src" :alt="image.alt" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {ElCarousel, ElCarouselItem} from 'element-plus';
import api from "@/api";

export default {
  name: "carousel",
  components: {
    ElCarousel,
    ElCarouselItem
  },

  data() {
    return {
      images: []
    };
  },
  //  初始化 轮播图
  mounted() {
    api.get("/api/getimages").then(res => {

      console.log(res.serverData.images);
      this.images = res.serverData.images;
      // console.log(this.images);
    })
  }
}
</script>

<style scoped>
.carousel {
  height: 100%; /* 修改高度为100%，与父容器高度一致 */
}

.carousel-image {
  object-fit: cover;
  width: 100%; /* 确保图片宽度占满容器 */
  height: 100%; /* 确保图片高度占满容器 */
}
</style>